<template>
	<view class="login">
		<view class="header">
			<view class="gohome" @click="goToHome">
				<uni-icons type="left" size="30"></uni-icons>
				<view class="gohome-txt">
					首页
				</view>
				
			</view>
			<view class="header-title">
				登录
			</view>
		</view>
		<view class="top-img">
			<image src="../../static/touxiang.jpg" class="touxiang" mode=""></image>
		</view>
		<view class="form-box">

			<uni-section title="" type="line">
				<view class="example">
					<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
						<uni-forms-item label="账号" required name="name">
							<uni-easyinput v-model="valiFormData.name" placeholder="请输入账号" />
						</uni-forms-item>
						<uni-forms-item label="密码" required name="age">
							<uni-easyinput v-model="valiFormData.age" placeholder="请输入密码" />
						</uni-forms-item>
						<!-- <uni-forms-item label="自我介绍" name="introduction">
						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item> -->
					</uni-forms>
					<button type="primary" @click="submit1('valiForm')">登录</button>
					<button type="" @click="islogin">注册</button>
				</view>
			</uni-section>

			<view class="bottom-login">
				<uni-popup ref="popup" background-color="#fff" type="bottom">
					<view class="bottom-login-form">
						<uni-forms :modelValue="formData" ref="bottomform" :rules="customRules">
							<uni-forms-item label="手机号" name="phone">
								<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" />
							</uni-forms-item>

							<uni-forms-item label="密码" name="password">
								<uni-easyinput type="text" v-model="formData.password" placeholder="请输入姓名" />
							</uni-forms-item>

						</uni-forms>
						<button @click="submit2" type="primary">注册</button>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				// 分段器数据
				current: 0,
				items: ['左对齐', '顶部对齐'],
				isGoMy:null,
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},

				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空',
						}, {
							format: 'number',
							errorMessage: '账号只能输入数字'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							format: 'number',
							errorMessage: '密码只能输入数字'
						}]
					}
				},

				// 注册表单校验规则
				customRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							pattern: /^1[3456789]\d{9}$/,
							errorMessage: '手机号格式错误'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							minLength: 6,
							errorMessage: '密码必须大于等于6位数'
						}]
					},
				},

				dynamicLists: [],
				formData: {
					phone: '',
					password: ''
				},
			}
		},
		computed: {
			// 处理表单排列切换
			// alignment() {
			// 	if (this.current === 0) return 'left'
			// 	if (this.current === 1) return 'top'
			// 	return 'left'
			// }
		},
		onLoad(res) {
			// console.log(res.isGoMy)
			this.isGoMy = res.id;
		},
		
		methods: {
			goToHome() {
				uni.redirectTo({
					url: '../index/index'
				});
				// let canNavBack = getCurrentPages();
				// if (canNavBack && canNavBack.length > 1) {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// } else {
				// 	history.back(2);
				// }
			},
			
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},

			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			submit1(ref) {
				this.$refs.valiForm.validate().then(res => {
					// console.log('success', res);
					let userInfo = JSON.parse(localStorage.getItem("userInfo"));
					if (!userInfo) {
						uni.showToast({
							title: `该账号未注册`,
							icon:"error"
						});
					} else {
						if (
							res.name == userInfo[0].userphone &&
							res.age == userInfo[0].userpassword
						) {
							uni.showToast({
								title: `登录成功,正在跳转`,
								icon:"loading"
							});
							setTimeout(() => {
								if(this.isGoMy){
									// uni.navigateTo({
									// 	url: `../home/contentdetail?id=${this.isGoMy}`
									// });
									uni.navigateTo({
									    url: `../home/contentdetail?id=${this.isGoMy}`,
									    success(){
									      //   let page = getCurrentPages().pop(); //跳转页面成功之后
									      //   if (!page) return; 
									      //       page.onLoad(); //如果页面存在，则重新刷新页面
															// console.log(123)
															setTimeout(() => {
																location.reload();
															}, 400)


									        }
									});
								}else{
									uni.navigateTo({
										url: `../mine/mine`
									});
								}
								
							},2000)
							
					 	localStorage.setItem("codeyes", 200);
						}else{
							uni.showToast({
								title: `该账号未注册`,
								icon:"error"
							});
						}
					}

				}).catch(err => {
					console.log('err', err);
				})
			},
			submit2() {
				this.$refs.bottomform.validate().then(res => {

					let localChatData = localStorage.getItem("userInfo");
					if (!localChatData) {
						localChatData = [];
					} else {
						localChatData = JSON.parse(localChatData);
					}

					let userInfo = {
						userphone: this.formData.phone,
						userpassword: this.formData.password

					}
					localChatData.push(userInfo);
					// console.log(res);
					localStorage.setItem("userInfo", JSON.stringify(localChatData));

					uni.showToast({
						title: `注册成功`,
					});
					this.$refs.popup.close();

				}).catch(err => {
					uni.showToast({
						title: `注册失败`,
						icon: "error"
					});
				})
			},
			islogin() {
				this.$refs.popup.open('bottom');
			},

		}
	}
</script>

<style lang="less">
	/deep/.uni-section-header[data-v-5584ec96] {
		display: none;
	}
	.gohome{
		display: flex;
	}
	.gohome-txt{
		line-height: 60rpx;
	}
.header {
		background-color: #F8F8F8;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;

		.header-title {
			margin-left: 220rpx;
			font-size: 36rpx;
		}
	}
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.form-box {
		margin-top: 100rpx;
	}

	.top-img {
		margin: 0 auto;
	}

	.touxiang {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		margin: 0 auto;
		display: block;
		margin-top: 100rpx;
	}

	uni-button {
		margin-bottom: 20rpx;
	}

	/deep/.uni-popup .uni-popup__wrapper[data-v-7c43d41b] {
		height: 550rpx;
	}

	.bottom-login-form {
		padding: 100rpx 20rpx 0rpx;
	}
</style>
